<template>
  <div class="app-container">
    <el-container>
      <el-aside width="100px">
        <el-menu default-active="2">
          <el-menu-item  v-for="item in products" :key="item.productCode" :label="item.productName" index="1" @click="handleClick(item)">
            <span>{{item.productName}}</span>
          </el-menu-item>
         
        </el-menu>
      </el-aside>
      <el-main class="context">
        <div>
          <el-upload
            class="upload-demo"
              :http-request="beforePriceUpload"
              :show-file-list="false" 

          >
            <el-button size="small" type="primary" class="display:inline-block">点击上传</el-button>
          </el-upload>
          <el-button size="small" type="primary" class="display:inline-block" @click="downFile">下载模板</el-button>
        </div>
        <el-table ref="flashTable" :data="list" style="width: 100%;" v-loading="listLoading" border>
          <el-table-column type="selection" width="60" align="center"></el-table-column>
          <el-table-column label="品牌名称" align="center" width="200">
            <template slot-scope="scope">{{scope.row.brandName}}</template>
          </el-table-column>
          <el-table-column label="产品名称" align="center" width="200">
            <template slot-scope="scope">{{scope.row.productName}}</template>
          </el-table-column>
          <el-table-column
            v-if="specs !==undefined &specs !== null &&specs.length>0"
            label="规格"
            width="100"
            align="center"
          >
            <el-table-column
              v-for="item in specs"
              :key="item.id"
              :label="item.specName"
              width="120"
            >
              <template slot-scope="scope">{{getSpecValue(scope.row.goodsSpecList,item.specCode)}}</template>
            </el-table-column>
          </el-table-column>

  <el-table-column
            v-if="pricesrule !==undefined &pricesrule !== null &&pricesrule.length>0"
            label="价格"
            width="100"
            align="center"
          >
            <el-table-column
              v-for="item in pricesrule"
              :key="item.indentity"
              :label="item.indentityName"
              width="120"
            >
              <template slot-scope="scope">{{getPriceValue(scope.row.prices,item.indentity)}}</template>
            </el-table-column>
          </el-table-column>

          <el-table-column label="创建人" width="200" align="center">
            <template slot-scope="scope">{{scope.row.creator}}</template>
          </el-table-column>
          <el-table-column label="创建时间" width="200" align="center">
            <template slot-scope="scope">{{scope.row.createDate}}</template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>

    <!-- <el-tabs :tab-position="tabPosition" style="height: 200px;" @tab-click="handleClick">
    <el-tab-pane v-for="item in products" :key="item.productCode" :label="item.productName" >
     

    </el-tab-pane>
    </el-tabs>-->
  </div>
</template>
<script>
import { getBrandProduct ,getProductspes,getUploadPriceRule,queryUploadPrice,getUploadFileSchame,uploadPrice} from "@/api/partner";
import { formatDate } from "@/utils/date";
import { getAllProducts, getGoodsByProduct } from "@/api/goods";
const cityOptions = [];
const defaultListQuery = {
  pageNum: 1,
  pageSize: 5,
  queryObject: { brandName: "" }
};
const defaultFlashPromotion = {
  id: null,
  title: null,
  startDate: null,
  endDate: null,
  status: 0
};
export default {
  name: "flashPromotionList",
  list: [],

  data() {
    return {
      listLoading: false,
      tabPosition: "left",
      fileList: [
        {
          name: "food.jpeg",
          url:
            "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
        }
      ],
      products: [],
      productOnSelect:{},
      specs:[],
      pricesrule:[],
      list: [],
    };
  },
  created() {
    let brand = this.$route.query;
    this.products = []
    this.products.push(brand)
    getProductspes(this.products[0]).then(response => {
      this.specs = response.data;
      this.productOnSelect = this.products[0];
      getUploadPriceRule(this.products[0]).then(response1 => {
        this.pricesrule = response1.data;
        this.listLoading = true
        queryUploadPrice(this.products[0]).then(response2=>{
          response2.data.forEach(item => {
            item.brandName = this.$route.query.brandName
            item.productName = this.$route.query.productName
          })
          this.list = response2.data
        }).finally(() => {
          this.listLoading = false
        })
      });
    });
  },
  methods: {
    handleClick(product) {
       this.productOnSelect = product;
     getProductspes(product).then(response => {
      this.specs = response.data;
       getUploadPriceRule(product).then(response1 => {
      this.pricesrule = response1.data;
      this.listLoading = true
      queryUploadPrice(product).then(response2=>{
        response2.data.forEach(item => {
          item.brandName = this.$route.query.brandName
          item.productName = this.$route.query.productName
        })
        this.list = response2.data
      }).finally(() => {
        this.listLoading = false
      })
    });
    });
   
    },
    beforePriceUpload(param){
      const formData = new FormData()
      formData.append('file', param.file)
      formData.append('productCode', this.productOnSelect.productCode)
      formData.append('brandCode', this.productOnSelect.brandCode)
      uploadPrice(formData).then(()=>{
        this.$message({
          message: '上传成功',
          type: 'success'
        });
        this.listLoading = true
        queryUploadPrice(this.productOnSelect).then(res=>{
          res.data.forEach(item => {
            item.brandName = this.$route.query.brandName
            item.productName = this.$route.query.productName
          })
          this.list = res.data
        }).finally(() => {
          this.listLoading = false
        })
      })
    },
    getSpecValue(val, specCode) {
      if (val == null) {
        return;
      }
      var array = val.filter(item => {
        if (item.specCode === specCode) {
          return item;
        }
      });
      if (array == undefined || array.length <= 0) {
        return;
      }
      return array[0].specValue;
    },
     getPriceValue(val, indentity) {
      if (val == null) {
        return;
      }
      var array = val.filter(item => {
        if (item.indentity === indentity) {
          return item;
        }
      });
      if (array == undefined || array.length <= 0) {
        return;
      }
      return array[0].price;
    },
       downFile() {
         const url =`/partner/manage/getUploadFileSchame?productCode=${this.productOnSelect.productCode}&brandCode=${this.productOnSelect.brandCode}`
        //  getUploadFileSchame( this.productOnSelect).then(response=>{
        //    debugger
                
        //     
        //  })
            const downloadElement = document.createElement('a');
                const href = url; // 创建下载的链接
                downloadElement.href = href;
                downloadElement.download = this.productOnSelect.productName+`价格模板.xlsx`; // 下载后文件名
                document.body.appendChild(downloadElement);
                downloadElement.click(); // 点击下载
                document.body.removeChild(downloadElement); // 下载完成移除元素
     
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.context {
  padding: 0px 10px;
}
.upload-demo {
  display: inline-block;
}
</style>


